<template>
    <div class="xms-flex-wrap">
        <div class="xms-flex-middle">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in data.panel" :key="index">
                    <a :href="item.link">
                        <img style="width: 100vw" :src="item.image">
                    </a>
                </van-swipe-item>
            </van-swipe>
            <div class="pd-12-16 bg-white" style="padding-bottom: 0">
                <div @click="show=true" class="home-collect" >
                    <img width="35" height="35" src="../assets/img/icon-collect.png">
                    <div class="font-16 font-weight ml10">关注公众号</div>
                </div>
            </div>
            <div class="course-main">
                <router-link :to="{name:'Detail',query:{id:item.id}}" v-for="(item,index) in data.goods" :key="index">
                    <div class="course-list">
                        <img :src="item.image">
                        <div class="course-content">
                            <div>
                                <div class="course-title">{{item.title}}</div>
                                <div class="font-grey font-12 ellipsis2">{{item.brief}}</div>
                                <div class="font-16 font-red mt10">¥{{item.new}}
                                    <del class="font-12 font-grey" style="margin-left: 3px">¥{{item.old}}</del>
                                </div>
                            </div>
                            <div class="font-grey font-12">已售{{item.sale}}</div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
        <van-popup v-model="show">
            <img width="200" height="200" src="../assets/img/qrcode.jpg">
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                show:false,
                url: {
                    panel: this.axiosUrl + 'panel/panel',
                    goods: this.axiosUrl + 'goods/goods',
                },
                data: {
                    panel: '',
                    goods: ''
                }

            }
        },
        components: {},
        mounted() {
            let _this = this
            _this.panel()
            _this.goods()
            this.$wxConfig.share(this.$route.path)
        },
        methods: {
            panel() { // 轮播图
                let _this = this
                this.$http.post(_this.url.panel, {}, (res) => {
                    _this.data.panel = res
                })
            },

            goods() { // 商品列表
                let _this = this
                this.$http.post(_this.url.goods, {}, (res) => {
                    _this.data.goods = res
                })
            }
        }
    };
</script>
<style lang="stylus" scoped>
    .xms-flex-wrap
        height calc(100vh - 50px)

    .course-main
        .course-list
            border-bottom 1px solid #e5e5e5
            display flex
            flex-direction row
            padding 16px
            background white

            img
                display block
                width 125px
                height 125px

            .course-content
                flex 1
                margin-left 10px
                display flex
                flex-direction column
                justify-content space-between
                align-items flex-start

                .course-title
                    color #313131
                    width 200px
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    font-size 15px

    .ellipsis2
        width 200px
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

    .home-collect
        justify-content center
        border-radius 8px
        display flex
        align-items center
        padding 12px 16px
        border 5px dashed #ccc
</style>
